<template>
   <div id="home">
      <nav-bar class="home-nav"><template v-slot:center><div>购物街</div></template></nav-bar>
         <tab-control :titles="['流行','新款','精选']" 
                  @tabClick="tabClick"
                  ref="tabControl1"
                  v-show="isTabFixed"/>
      <scroll class="content" 
              ref="scroll" 
              :probe-type="3" 
              @scroll="contentScroll"
              :pull-up-load="true"
              @pullingUp="loadMore"
              >
           <home-swiper :banners="banners" @swiperImageLoad="swiperImageLoad"/>
      <recommend-view :recommends="recommends"/>
     <feature-view></feature-view>
     <tab-control :titles="['流行','新款','精选']" 
                  @tabClick="tabClick"
                  ref="tabControl2"
                  class="tab-control"/>
     <goods-list :goods="showGoods"></goods-list>
      </scroll>
      <back-top @click="backClick" v-show="isShowBackTop"></back-top>
   </div>
</template>

<script>

import HomeSwiper from './childComps/HomeSwiper.vue';
import RecommendView from './childComps/RecommendView.vue';
import FeatureView from './childComps/FeatureView';

import NavBar from 'components/common/navbar/NavBar';
import TabControl from '../../components/content/tabControl/TabControl.vue'
import GoodsList from '../../components/content/goods/GoodsList.vue'
import Scroll from 'components/common/scroll/Scroll'
import BackTop from 'components/content/backTop/BackTop'

import { getHomeMultidata, getHomeGoods } from "../../network/home";
import bus from '@/bus'
import {debounce} from "../../common/utils";


export default {
  name: 'Home',
  components: {
     HomeSwiper,
     RecommendView,
     FeatureView,

     NavBar,
     TabControl,
     GoodsList,
     Scroll,
     BackTop
    
  },
  data() {
     return {
       banners: [],
       recommends: [],
       goods: {
          'pop': {page: 0, list: []},
          'new': {page: 0,list: []},
          'sell': {page: 0,list: []},
       },
       currentType: 'pop',
       isShowBackTop: false,
       tabOffsetTop: 0,
       isTabFixed: false,
       saveY: 0
     }
  },
  computed: {
     showGoods() {
        return this.goods[this.currentType].list
     }
  },
  unmounted() {
   console.log('home unmounted');
  },
  activated() {
   this.$refs.scroll.scrollTo(0, this.saveY, 0)
   this.$refs.scroll.refresh()
  },
  deactivated() {
   this.saveY = this.$refs.scroll.getScrollY()
  },
  created() {
     //请求多个数据
    this.getHomeMultidata()

     //2.请求商品数据
    this.getHomeGoods('pop')
    this.getHomeGoods('new')
    this.getHomeGoods('sell')
 },
 mounted() {
    //监听item中图片加载完成
    const refresh = debounce(this.$refs.scroll.refresh, 50)
    bus.$on('itemImageLoad', () =>{
      refresh()
    })
 },
 methods: {
    //事件监听相关
    tabClick(index) {
       switch (index) {
          case 0:
             this.currentType = 'pop'
             break
          case 1 :
             this.currentType = 'new'
             break
          case 2: 
          this.currentType = 'sell'
            break
       }
       this.$refs.tabControl1.currentIndex = index;
       this.$refs.tabControl2.currentIndex = index;
    },
    backClick() {
       this.$refs.scroll.scrollTo(0,0)
    },
    contentScroll(position) {
       //1.判断backtop是否显示
       this.isShowBackTop = -(position.y) > 1000

       //2.决定tabControl是否吸顶(position: fixed)
       this.isTabFixed = -(position.y) > this.tabOffsetTop
    },
    loadMore() {
       this.getHomeGoods(this.currentType)
    },
    swiperImageLoad() {
       this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop
    },
    //网络请求相关方法
    getHomeMultidata() {
      getHomeMultidata().then(res => {
        this.banners = res.data.banner.list;
        this.recommends = res.data.recommend.list;
     })
    },
    getHomeGoods(type) {
       const page = this.goods[type].page + 1
      getHomeGoods(type,page).then(res => {
         this.goods[type].list.push(...res.data.list)
         this.goods[type].page += 1

         //完成上拉加载更多
         this.$refs.scroll.finishPullUp()
       })
    }
 }
}
</script>

<style scoped>
    #home {
      /* padding-top: 44px; */
      height: 100vh;
      position: relative;
      /* viewport height */
     }

   .home-nav {
      background-color: pink;
      color: #fff;

      /* 在使用浏览器原生滚动时，为了让导航不跟随一起滚动 */
      /* position: fixed;
      left: 0;
      right: 0;
      top: 0;
      z-index: 9; */

   }

   .content {
     overflow: hidden;

     position: absolute;
     top: 44px;
     bottom: 49px;
     left: 0;
     right: 0;
   }
   .tab-control {
      position: relative;
      z-index: 9;
   }
   /* .content {
      height: calc( 100vh - 93px );
      overflow: hidden;
      margin-top: 44px;
     
   } */
</style>